<template>
  <div>
    <mt-header title="宠物领养" style="background: #f49b00">
      <router-link to="" slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
    </mt-header>

    <h4>搜索列表</h4>
    <van-divider :style="{ borderColor: '#aaa', padding: '0 10px' }" />
    <div class="card">
      <div v-for="item in data" :key="item.apid" @click="details(item.apid)">
        <img :src="`${item.pic}`" />
        <div>
          <h3>{{ item.petName }}</h3>
          <p>{{ item.type }}</p>
          <van-tag
            plain
            type="primary"
            size="large"
            color="#f49b00"
            style="margin: 0 12px 0"
            >性别:{{ item.sex }}</van-tag
          >
          <van-tag plain type="primary" size="large">性格</van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 点击卡片跳转到详情页方法
    details(id) {
      this.$router.push(`/adopt/details?apid=${id}`);
    },
    // 获得搜索的宠物数据
    getList() {
      let msg = this.$route.query.msg;
      // this.axios.get('/adopt/search',msg).then(res=>{
      //     console.log(res);
      // })   //post这样写
      this.axios.get(`/adopt/search?msg=${msg}`).then((res) => {
        console.log(res);
        this.data = res.data.data;
      });
      if (res.cod == 400) {
        this.adpet = res.msg;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  img {
    width: 100%;
    border-radius: 7px;
  }
  > div {
    width: 150px;
    // border: 1px solid gray;
    border-radius: 10px;
    box-shadow: 8px 8px 7px 3px rgba(0, 0, 0, 0.1);
    margin: 5px;
    padding: 4px;
    background-color: white;
    h3 {
      margin: 5px;
    }
    p {
      margin: 5px 15px 5px;
      color: gray;
      font-size: 14px;
    }
  }
}
h4 {
  margin-left: 15px;
}
</style>